<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="base.css"/>
    <link rel="stylesheet" href="index.css"/>
    <link rel="stylesheet" href="swiper.min.css"/>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .swiper-container{
            width: 100%;
            height:180px;
        }
        ul{
            list-style: none;
        }
        .swiper-slide img{
            width: 100%;
            display: block;
        }
    </style>

</head>
<body>
<!--头部-->
<div class="header">
    <div class = 'left'>上海</div>
    <div class = 'banner'>驴妈妈旅游网</div>
    <div class = 'right'><img src="images/icon/my.png" alt=""/></div>
</div>
<!--轮播图-->
<div class="swiper-container">
    <!--图片-->
    <ul class="swiper-wrapper">
        <li class="swiper-slide">
            <a href="javascript:;">
                <img src="images/img/banner1.jpg" alt="">
            </a>
        </li>
        <li  class="swiper-slide">
            <a href="javascript:;">
                <img src="images/img/banner2.jpg" alt="">
            </a>
        </li>
        <li  class="swiper-slide">
            <a href="javascript:;">
                <img src="images/img/banner3.jpg" alt="">
            </a>
        </li>
        <li  class="swiper-slide">
            <a href="javascript:;">
                <img src="images/img/banner4.jpg" alt="">
            </a>
        </li>
        <li  class="swiper-slide">
            <a href="javascript:;">
                <img src="images/img/banner5.jpg" alt="">
            </a>
        </li>
        <li  class="swiper-slide">
            <a href="javascript:;">
                <img src="images/img/banner6.jpg" alt="">
            </a>
        </li>
        <li  class="swiper-slide">
            <a href="javascript:;">
                <img src="images/img/banner7.jpg" alt="">
            </a>
        </li>
    </ul>
</div>

<!--六张图-->
<div class="jd_nav">
    <ul>
        <li>
            <a href="javascript:;">
                <img src="images/icon/nav1.png" alt=""/>

            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/icon/nav2.png" alt=""/>

            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/icon/nav3.png" alt=""/>

            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/icon/nav4.png" alt=""/>

            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/icon/nav5.png" alt=""/>

            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/icon/nav6.png" alt=""/>

            </a>
        </li>

    </ul>
</div>

<!--八张图-->

<div class="jd_nav1">
    <ul>
        <li>
            <a href="javascript:;">
                <img src="images/icon/j1.png" alt=""/>

            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/icon/j2.png" alt=""/>

            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/icon/j3.png" alt=""/>

            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/icon/j4.png" alt=""/>

            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/icon/j5.png" alt=""/>

            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/icon/j6.png" alt=""/>

            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/icon/j7.png" alt=""/>

            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/icon/j8.png" alt=""/>

            </a>
        </li>

    </ul>
</div>

<!--三张图-->

    <div class="jd_pContent clearfix">
        <a href="javascript:;" class="a_50 f_left">
            <img src="images/img/t1.jpg" alt="">
        </a>
        <a href="javascript:;" class="a_50 f_left b_bottom b_left">
            <img src="images/img/t2.jpg" alt="">
        </a>
        <a href="javascript:;" class="a_50 f_left b_left">
            <img src="images/img/t3.jpg" alt="">
        </a>
    </div>

<!--四张图-->
<div class="nav">
    <p>热门活动</p>
    <ul>
        <li>
            <a href="javascript:;">
                <img src="images/img/r1.jpg" alt=""/>

            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/img/r2.jpg" alt=""/>

            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/img/r3.jpg" alt=""/>

            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="images/img/r4.jpg" alt=""/>

            </a>
        </li>
    </ul>
</div>

<!--五张图-->

<div class="nav1">

    <ul>
        <li>
            <a href="javascript:;">
                <img src="images/img/zm1.jpg" alt=""/>
            </a>

        </li>
        <p>[热门活动]驴妈妈温泉活动季</p>
        <h5>听音乐，泡温泉，就找驴妈妈，泉新玩法，全心为你，5折整点秒杀，最高立减100元</h5>
        <li>
            <a href="javascript:;">
                <img src="images/img/zm2.jpg" alt=""/>

            </a>

        </li>
        <p>[热门活动]春季抢"票"啦</p>
        <h5>听音乐，泡温泉，就找驴妈妈，泉新玩法，全心为你，5折整点秒杀，最高立减100元</h5>

        <li>
            <a href="javascript:;">
                <img src="images/img/zm3.jpg" alt=""/>

            </a>

        </li>
        <p>[热门活动]门票元旦欢</p>
        <h5>听音乐，泡温泉，就找驴妈妈，泉新玩法，全心为你，5折整点秒杀，最高立减100元</h5>

        <li>
            <a href="javascript:;">
                <img src="images/img/zm4.jpg" alt=""/>

            </a>

        </li>
        <p>[热门活动]上海月亮船</p>
        <h5>听音乐，泡温泉，就找驴妈妈，泉新玩法，全心为你，5折整点秒杀，最高立减100元</h5>

        <li>
            <a href="javascript:;">
                <img src="images/img/zm5.jpg" alt=""/>

            </a>

        </li>
        <p>[热门活动]上海欢乐谷</p>
        <h5>听音乐，泡温泉，就找驴妈妈，泉新玩法，全心为你，5折整点秒杀，最高立减100元</h5>

    </ul>
</div>








<script src = 'swiper.min.js'></script>
<script>
    var mySwiper = new Swiper('.swiper-container',{
        effect : 'cube',
        cube: {
            slideShadows: true,
            shadow: true,
//            shadowOffset: 100,
            shadowScale: 0.6
        }
    })

</script>
</body>
</html>